<script setup lang="ts">
  import { InputSearch } from '@arco-design/web-vue';
  import { toRefs } from 'vue';
  import JobsBg from '/@/assets/jobs/jobs.png';

  interface SearchHeaderProps {
    placeholder?: string;
    maxLength?: number;
    allowClear?: boolean;
  }

  const props = withDefaults(defineProps<SearchHeaderProps>(), {
    placeholder: '搜索岗位信息',
    maxLength: 100,
    allowClear: true,
  });

  const { placeholder, maxLength } = toRefs(props);
</script>

<template>
  <div
    class="relative gradient-bg w-full h-full bg-gradient-to-r from-[#c0c0f9] to-[#f2bed4] flex items-center justify-center"
  >
    <input-search
      class="c-search !w-[650px] h-[50px] !rounded-[50px] !px-[24px] z-10"
      :placeholder="placeholder"
      :max-length="maxLength"
      :allow-clear="allowClear"
    />
    <img
      :src="JobsBg"
      alt=""
      class="h-full w-full z-0 object-cover absolute top-0 left-0 right-0 bottom-0"
    />
  </div>
</template>
<style>
  .gradient-bg {
    background-size: 600% 600%;
    animation: gradientBg 3s ease infinite;
  }

  @keyframes gradientBg {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  .c-search {
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
  }

  .c-search.arco-input-wrapper.arco-input-focus {
    border: none !important;
  }
</style>
